<template>
  <div class="settings-container">
    <el-row :gutter="20">
      <el-col :span="6" :xs="24">
        <el-card class="settings-nav">
          <template #header>
            <div class="card-header">
              <span>系统设置</span>
            </div>
          </template>
          <el-menu
            :default-active="activeMenu"
            class="settings-menu"
            @select="handleMenuSelect"
          >
            <el-menu-item index="basic">
              <el-icon><Setting /></el-icon>
              <span>基本设置</span>
            </el-menu-item>
            <el-menu-item index="notification">
              <el-icon><Bell /></el-icon>
              <span>通知设置</span>
            </el-menu-item>
            <el-menu-item index="privacy">
              <el-icon><Lock /></el-icon>
              <span>隐私设置</span>
            </el-menu-item>
            <el-menu-item index="appearance">
              <el-icon><Brush /></el-icon>
              <span>外观设置</span>
            </el-menu-item>
            <el-menu-item index="advanced">
              <el-icon><Tools /></el-icon>
              <span>高级设置</span>
            </el-menu-item>
          </el-menu>
        </el-card>
      </el-col>
      
      <el-col :span="18" :xs="24">
        <el-card class="settings-content">
          <template #header>
            <div class="card-header">
              <span>{{ getCurrentTitle() }}</span>
            </div>
          </template>
          
          <!-- 基本设置 -->
          <div v-if="activeMenu === 'basic'">
            <el-form
              :model="basicSettings"
              label-width="120px"
              class="settings-form"
            >
              <el-form-item label="系统语言">
                <el-select v-model="basicSettings.language" placeholder="请选择语言">
                  <el-option label="简体中文" value="zh-CN" />
                  <el-option label="English" value="en-US" />
                </el-select>
              </el-form-item>
              
              <el-form-item label="默认搜索范围">
                <el-select v-model="basicSettings.searchScope" placeholder="请选择搜索范围">
                  <el-option label="全部文献" value="all" />
                  <el-option label="我的收藏" value="favorites" />
                  <el-option label="最近上传" value="recent" />
                </el-select>
              </el-form-item>
              
              <el-form-item label="每页显示数量">
                <el-select v-model="basicSettings.pageSize" placeholder="请选择每页显示数量">
                  <el-option label="10条" :value="10" />
                  <el-option label="20条" :value="20" />
                  <el-option label="50条" :value="50" />
                  <el-option label="100条" :value="100" />
                </el-select>
              </el-form-item>
              
              <el-form-item label="自动保存草稿">
                <el-switch v-model="basicSettings.autoSaveDraft" />
              </el-form-item>
              
              <el-form-item>
                <el-button type="primary" @click="saveBasicSettings">
                  保存设置
                </el-button>
                <el-button @click="resetBasicSettings">
                  恢复默认
                </el-button>
              </el-form-item>
            </el-form>
          </div>
          
          <!-- 通知设置 -->
          <div v-if="activeMenu === 'notification'">
            <el-form
              :model="notificationSettings"
              label-width="150px"
              class="settings-form"
            >
              <el-form-item label="邮件通知">
                <el-switch v-model="notificationSettings.emailEnabled" />
              </el-form-item>
              
              <el-form-item label="系统通知">
                <el-switch v-model="notificationSettings.systemEnabled" />
              </el-form-item>
              
              <el-form-item label="文献处理完成">
                <el-switch v-model="notificationSettings.literatureProcessed" />
              </el-form-item>
              
              <el-form-item label="收藏文献更新">
                <el-switch v-model="notificationSettings.favoriteUpdated" />
              </el-form-item>
              
              <el-form-item label="搜索结果更新">
                <el-switch v-model="notificationSettings.searchUpdated" />
              </el-form-item>
              
              <el-form-item label="通知声音">
                <el-switch v-model="notificationSettings.soundEnabled" />
              </el-form-item>
              
              <el-form-item>
                <el-button type="primary" @click="saveNotificationSettings">
                  保存设置
                </el-button>
                <el-button @click="resetNotificationSettings">
                  恢复默认
                </el-button>
              </el-form-item>
            </el-form>
          </div>
          
          <!-- 隐私设置 -->
          <div v-if="activeMenu === 'privacy'">
            <el-form
              :model="privacySettings"
              label-width="150px"
              class="settings-form"
            >
              <el-form-item label="公开个人资料">
                <el-switch v-model="privacySettings.publicProfile" />
              </el-form-item>
              
              <el-form-item label="显示在线状态">
                <el-switch v-model="privacySettings.showOnlineStatus" />
              </el-form-item>
              
              <el-form-item label="允许搜索到我">
                <el-switch v-model="privacySettings.allowSearch" />
              </el-form-item>
              
              <el-form-item label="文献默认公开">
                <el-switch v-model="privacySettings.defaultPublic" />
              </el-form-item>
              
              <el-form-item label="两步验证">
                <el-switch v-model="privacySettings.twoFactorAuth" />
              </el-form-item>
              
              <el-form-item>
                <el-button type="primary" @click="savePrivacySettings">
                  保存设置
                </el-button>
                <el-button @click="resetPrivacySettings">
                  恢复默认
                </el-button>
              </el-form-item>
            </el-form>
          </div>
          
          <!-- 外观设置 -->
          <div v-if="activeMenu === 'appearance'">
            <el-form
              :model="appearanceSettings"
              label-width="120px"
              class="settings-form"
            >
              <el-form-item label="主题颜色">
                <el-color-picker v-model="appearanceSettings.themeColor" />
              </el-form-item>
              
              <el-form-item label="深色模式">
                <el-switch v-model="appearanceSettings.darkMode" />
              </el-form-item>
              
              <el-form-item label="紧凑模式">
                <el-switch v-model="appearanceSettings.compactMode" />
              </el-form-item>
              
              <el-form-item label="动画效果">
                <el-switch v-model="appearanceSettings.animations" />
              </el-form-item>
              
              <el-form-item label="字体大小">
                <el-slider 
                  v-model="appearanceSettings.fontSize" 
                  :min="12" 
                  :max="20" 
                  show-input
                />
              </el-form-item>
              
              <el-form-item>
                <el-button type="primary" @click="saveAppearanceSettings">
                  保存设置
                </el-button>
                <el-button @click="resetAppearanceSettings">
                  恢复默认
                </el-button>
              </el-form-item>
            </el-form>
          </div>
          
          <!-- 高级设置 -->
          <div v-if="activeMenu === 'advanced'">
            <el-alert
              title="高级设置"
              type="warning"
              description="请谨慎修改以下设置，错误的配置可能导致系统异常"
              show-icon
              style="margin-bottom: 20px;"
            />
            
            <el-form
              :model="advancedSettings"
              label-width="150px"
              class="settings-form"
            >
              <el-form-item label="缓存清理">
                <el-button @click="clearCache">
                  清理系统缓存
                </el-button>
                <div class="form-item-desc">清除本地缓存数据，释放存储空间</div>
              </el-form-item>
              
              <el-form-item label="重置所有设置">
                <el-button type="danger" @click="resetAllSettings">
                  恢复所有默认设置
                </el-button>
                <div class="form-item-desc">将所有设置恢复为系统默认值</div>
              </el-form-item>
              
              <el-form-item label="导出设置">
                <el-button @click="exportSettings">
                  导出当前设置
                </el-button>
                <div class="form-item-desc">将当前设置导出为配置文件</div>
              </el-form-item>
              
              <el-form-item label="导入设置">
                <el-upload
                  class="settings-upload"
                  action="#"
                  :auto-upload="false"
                  :on-change="handleSettingsUpload"
                >
                  <el-button>
                    选择配置文件
                  </el-button>
                </el-upload>
                <div class="form-item-desc">从配置文件导入设置</div>
              </el-form-item>
              
              <el-form-item label="系统信息">
                <el-button @click="showSystemInfo">
                  查看系统信息
                </el-button>
                <div class="form-item-desc">查看系统版本和运行状态</div>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  Setting, Bell, Lock, Brush, Tools, 
  Warning 
} from '@element-plus/icons-vue'

// 响应式数据
const activeMenu = ref('basic')

const basicSettings = ref({
  language: 'zh-CN',
  searchScope: 'all',
  pageSize: 20,
  autoSaveDraft: true
})

const notificationSettings = ref({
  emailEnabled: true,
  systemEnabled: true,
  literatureProcessed: true,
  favoriteUpdated: true,
  searchUpdated: false,
  soundEnabled: true
})

const privacySettings = ref({
  publicProfile: false,
  showOnlineStatus: true,
  allowSearch: true,
  defaultPublic: false,
  twoFactorAuth: false
})

const appearanceSettings = ref({
  themeColor: '#409eff',
  darkMode: false,
  compactMode: false,
  animations: true,
  fontSize: 14
})

const advancedSettings = ref({
  cacheSize: '256MB',
  lastClear: '2023-05-15'
})

// 方法
const handleMenuSelect = (index: string) => {
  activeMenu.value = index
}

const getCurrentTitle = () => {
  const titles: Record<string, string> = {
    basic: '基本设置',
    notification: '通知设置',
    privacy: '隐私设置',
    appearance: '外观设置',
    advanced: '高级设置'
  }
  return titles[activeMenu.value] || '系统设置'
}

const saveBasicSettings = () => {
  ElMessage.success('基本设置已保存')
}

const resetBasicSettings = () => {
  basicSettings.value = {
    language: 'zh-CN',
    searchScope: 'all',
    pageSize: 20,
    autoSaveDraft: true
  }
  ElMessage.success('基本设置已恢复默认')
}

const saveNotificationSettings = () => {
  ElMessage.success('通知设置已保存')
}

const resetNotificationSettings = () => {
  notificationSettings.value = {
    emailEnabled: true,
    systemEnabled: true,
    literatureProcessed: true,
    favoriteUpdated: true,
    searchUpdated: false,
    soundEnabled: true
  }
  ElMessage.success('通知设置已恢复默认')
}

const savePrivacySettings = () => {
  ElMessage.success('隐私设置已保存')
}

const resetPrivacySettings = () => {
  privacySettings.value = {
    publicProfile: false,
    showOnlineStatus: true,
    allowSearch: true,
    defaultPublic: false,
    twoFactorAuth: false
  }
  ElMessage.success('隐私设置已恢复默认')
}

const saveAppearanceSettings = () => {
  ElMessage.success('外观设置已保存')
}

const resetAppearanceSettings = () => {
  appearanceSettings.value = {
    themeColor: '#409eff',
    darkMode: false,
    compactMode: false,
    animations: true,
    fontSize: 14
  }
  ElMessage.success('外观设置已恢复默认')
}

const clearCache = () => {
  ElMessageBox.confirm(
    '确定要清理系统缓存吗？这将清除所有本地缓存数据。',
    '确认操作',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    ElMessage.success('缓存清理完成')
    advancedSettings.value.cacheSize = '0MB'
    advancedSettings.value.lastClear = new Date().toISOString().split('T')[0]
  }).catch(() => {
    // 用户取消
  })
}

const resetAllSettings = () => {
  ElMessageBox.confirm(
    '确定要恢复所有默认设置吗？这将重置所有配置选项。',
    '确认操作',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    resetBasicSettings()
    resetNotificationSettings()
    resetPrivacySettings()
    resetAppearanceSettings()
    ElMessage.success('所有设置已恢复默认')
  }).catch(() => {
    // 用户取消
  })
}

const exportSettings = () => {
  ElMessage.info('设置导出功能开发中...')
}

const handleSettingsUpload = () => {
  ElMessage.info('设置导入功能开发中...')
}

const showSystemInfo = () => {
  ElMessageBox.alert(
    `系统版本: v1.0.0
     构建时间: 2023-05-15
     运行环境: Vue 3 + Element Plus
     浏览器: ${navigator.userAgent}`,
    '系统信息',
    {
      confirmButtonText: '确定'
    }
  )
}
</script>

<style scoped>
.settings-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.settings-nav, .settings-content {
  margin-bottom: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.card-header {
  font-weight: bold;
  color: #303133;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.settings-menu {
  border: none;
}

.settings-form {
  max-width: 600px;
}

.settings-form .el-form-item {
  margin-bottom: 25px;
}

.form-item-desc {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}

.settings-upload {
  display: inline-block;
}

@media (max-width: 768px) {
  .settings-container {
    padding: 10px;
  }
  
  .el-col {
    margin-bottom: 20px;
  }
  
  .settings-form {
    max-width: 100%;
  }
}
</style>